<template>
	<view class="app">
		<view class="tui-set-box">
			
			<!-- <view class="tui-mtop" v-for="(item) in data" :key="item.id">
				<tui-list-cell @click="removeBank(item.sign_no)" padding="0" :lineLeft="false" :arrow="true" >
					<view class="tui-list-cell">
						{{filter.sub(item.bank_card_no,4,4)}}
					</view>
				</tui-list-cell>
			</view> -->
			<view class="content" v-for="(item) in data" @click="removeBank(item.sign_no)" :key="item.id">
				<bank-item  :bankCode="item.bank_code" :bankName="bankName[item.bank_code].name"  :cardCode="item.bank_card_no"/>
			</view>
			<view class="tui-exit">
				<view class="exit-btn" @click="tip" :style="{background:'#FF7104'}" >
					添加银行卡
				</view>
			</view> 
		</view>
		<!-- <view class="center">
			<view class="item">
				<view class="title"></view>
				<view class="jx-btn" @click="href()" :style="{background:'rgb(255, 113, 4)'}">添加银行卡</view>
			</view>
		</view> -->
		<com-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box" style="border-radius: 20rpx;">
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<view style="text-align:center;">说明</view>
						<!-- <view class="uni-title uni-common-mt uni-common-pl">选择银行卡</view>
						<view class="uni-list">
							87878787
						</view> -->
						<view style="border: #1296db;">
 
							<table style="width: 100%; border-collapse: collapse; ">
								<tr style="height: 50px;border: 2px solid;border-color: #F7F7F7;">
									<td style="padding: 12px; ">支持银行</td>
									<td style="padding: 12px; ">借记卡</td>
									<td style="padding: 12px; "></td>
									<td style="padding: 12px; ">贷记卡</td>
									<td style="padding: 12px; text-align: right; "></td>
								</tr>
								<tr style="height: 50px;border: 2px solid;border-color: #F7F7F7;">
									<td style="padding: 12px; "></td>
									<td style="padding: 12px; ">单笔限额</td>
									<td style="padding: 12px; ">单日限额</td>
									<td style="padding: 12px; ">单笔限额</td>
									<td style="padding: 12px; text-align: right; ">单日限额</td>
								</tr>
								<tr v-for="(item, index) in infoDocheckTableData" :key="'docheck_' + index" style="height: 50px;border: 2px solid;border-color: #F7F7F7;">
									<td style="padding: 12px; ">{{item.name}}</td>
									<td style="padding: 12px; ">{{item.per1}}</td>
									<td style="padding: 12px; ">{{item.day1}}</td>
									<td style="padding: 12px; ">{{item.per2}}</td>
									<td style="padding: 12px; text-align: right; ">{{item.day2}}</td>
								</tr>
							</table>
						
						</view>

					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="confirmPay" :style="{background:'#FF7104'}" @tap="href">确定</view>
				</view>
			</view>
		</com-bottom-popup>
	</view>
</template>

<script>
	import tuiListCell from "@/components/list-cell/list-cell"
	import bankItem from "@/components/bank-item/bank-item"
	import {bankName} from "@/utils/util.js"
	export default { 
		components: {
			tuiListCell,
			bankItem
		},
		data() {
			return {
				data:null,
				bankName:bankName(),
				popupShow:false,
				infoDocheckTableData:[
					{name:'工商银行',per1:'5k/笔',day1:'2w',per2:'5k/笔',day2:'2w'},
					{name:'中信银行',per1:'5w/笔',day1:'5w',per2:'5w/笔',day2:'5w'},
					{name:'上海银行',per1:'5w/笔',day1:'5w',per2:'5w/笔',day2:'5w'},
					{name:'光大银行',per1:'5k/笔',day1:'5k',per2:'5k/笔',day2:'5k'},
					{name:'民生银行',per1:'2w/笔',day1:'2w',per2:'2w/笔',day2:'2w'},
					{name:'北京银行',per1:'不支持',day1:'不支持',per2:'5w/笔',day2:'5w'},

					{name:'交通银行',per1:'1w/笔',day1:'1w',per2:'2w/笔',day2:'5w'},
					{name:'招商银行',per1:'不支持',day1:'不支持',per2:'5w/笔',day2:'5w'},
					{name:'广发银行',per1:'1w/笔',day1:'1w',per2:'1w/笔',day2:'1w'},
					{name:'建设银行',per1:'1w/笔',day1:'1w',per2:'1w/笔',day2:'1w'},
					{name:'浦发银行',per1:'5w/笔',day1:'5w',per2:'5w/笔',day2:'5w'},
					{name:'邮储银行',per1:'5k/笔',day1:'5k',per2:'2w/笔',day2:'5w'},
					{name:'广州农商行',per1:'1w/笔',day1:'1w',per2:'1w/笔',day2:'1w'},
					
				]
			}
		},
		onLoad() {
			this.getBank();
		},
		methods: {
			hidePopup(){
				this.popupShow = false
			},
			tip(){
				this.popupShow = true
				// uni.showModal({
				// 	title: '说明',
				// 	content: '你确定要解约这个银行卡吗？',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.unSign(signNo)
				// 		} else if (res.cancel) {
							
				// 		}
				// 	}
    			// });
			},
			href(){
				uni.navigateTo({
					url: '/pages/user/bindBank/addBank'
				})
			},
			getBank() {
				this.$http.request({
					url: this.$api.hj.getBank,
					method: 'POST',
					showLoading: true
				}).then(res => {
					if (res.code == 0) {
						this.$set(this, "data", res.data);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			removeBank(signNo){
				 uni.showModal({
					title: '解约',
					content: '你确定要解约这个银行卡吗？',
					success: (res) => {
						if (res.confirm) {
							this.unSign(signNo)
						} else if (res.cancel) {
							
						}
					}
    			});
			},
			unSign(signNo) {
				this.$http.request({
					url: this.$api.hj.unSign,
					method: 'POST',
					data:{
						sign_no:signNo
					},
					showLoading: true
				}).then(res => {
					if (res.code == 0) {
						this.$http.toast(res.msg);
						this.getBank();
					}
				}).catch(err => {
					this.$http.toast(err);
				})
			},

		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: `/pages/diy/diy?page_id=170`
			})
		},
	}
</script>

<style lang="scss" scoped>
.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}

	.tui-info-box {
		font-size: 34rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 100rpx;
		border: 1rpx solid #000000;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}

	.tui-exit {
		padding: 100rpx 24rpx;
	}
	.exit-btn{
		text-align: center;
		padding: 20rpx 0;
		color: #FFFFFF;
	}
	.confirmPay {
		color: #FFFFFF;
		background: #bc0100;
		padding: 26rpx 0;
		text-align: center;
		border-radius: 80rpx;
		font-size: 10pt;
		letter-spacing: 4rpx;
		margin-top: 80rpx;
	}
	/*底部选择弹层*/
	

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.tui-product-box {
		display: flex;
		align-items: center;
		font-size: 9pt;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
		flex: 1;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 14pt;
	}

	.tui-number {
		font-size: 9pt;
		line-height: 28rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 1300rpx;
		font-size: 10pt;
	}

	.tui-scrollview-box {
		padding: 0 10rpx 60rpx 10rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 9.5pt;
	}

	.tui-attr-active {
		font-weight: bold;
		position: relative;
		border-radius: 10rpx;
	}


	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
